<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ include file="../../commons/import_taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>${PROJECT_NAME }</title>
    <jsp:include page="../../commons/common_head.jsp"/>
    <link href="${BASE }/css/sb-admin.css" rel="stylesheet">
    <link href="${BASE }/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="${BASE }/scripts/datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="${BASE }/scripts/bootstrap-paginator.js"></script>
    <script src="${BASE }/scripts/datetimepicker/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <style>
        #operator {
            width: 66%;
        }

        #content {
            width: 70%;
        }

        #optime_begin {
            width: 90px;
        }

        #optime_end {
            width: 90px;
        }

        .btn-search {
            margin-left: 20px;
        }

        th {
            text-align: center;
        }

        .table {
            table-layout: fixed;
        }

        .table td, th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .control-label {
            color: #4d4d4d;
        }
    </style>
    <script>
        function adaptive() {
            var height = $(window).height() - 50;
            $("#page-wrapper").css("min-height", height);
            $("#table-body").css("width", $("#table-listheader").width());
        }

        function go(pageNumber) {
            $("#pageNumber").val(pageNumber);
            $("#form-search").submit();
        }

        $(function () {

            $("#clear").click(function () {
                $("#form-search").find("input[type='text']").val('');
            });

            var totalPages = '${pagination.biggestPageNumber}';
            if (totalPages > 0) {
                $("#pagination").bootstrapPaginator({
                    currentPage: '${pagination.pageNumber}',
                    totalPages: '${pagination.biggestPageNumber}',
                    numberOfPages: 8,
                    size: 'small',
                    alignment: 'right',
                    bootstrapMajorVersion: 3,
                    pageUrl: function (type, page, current) {
                        return "javascript:go(\"" + page + "\")";
                    }
                });
            }

            adaptive();
            $(window).resize(adaptive);
        });
    </script>
</head>
<body>
<div id="wrapper">
    <jsp:include page="../../navigation.jsp"/>
    <div id="page-wrapper">
        <ol class="breadcrumb">
            <li><i class="fa fa-dashboard"></i> <a href="${BASE }/sys/index"> 首页</a></li>
            <li><i class="fa fa-gear"></i> 系统管理</li>
            <li class="active"><i class="fa fa-users"></i> 用户管理</li>
        </ol>
        <div class="container-fluid">
            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="well well-sm">
                        <form id="form-search" class="form-inline" role="search" action="${BASE }/sys/log/list"
                              method="post">
                            <%-- 								<input type="hidden" name="pageNumber" id="pageNumber" value="${pagination.pageNumber }"/> --%>
                            <!-- 								<div class="form-group col-lg-2"> -->
                            <!-- 									<label class="control-label" for="operator">操作人</label> -->
                            <%-- 									<input value="${pagination.conditions.operator }" type="text" id="operator" name="operator" class="form-control input-sm"> --%>
                            <!-- 								</div> -->
                            <!-- 								<div class="form-group col-lg-3"> -->
                            <!-- 									<label class="control-label" for="content">操作说明</label> -->
                            <%-- 									<input value="${pagination.conditions.content }" type="text" id="content" name="content" class="form-control input-sm"> --%>
                            <!-- 								</div> -->
                            <!-- 								<div class="form-group"> -->
                            <!-- 									<label class="control-label" for="optime_begin">操作时间</label> -->
                            <!-- 									<div class="input-group"> -->
                            <%-- 										<input readonly value="${pagination.conditions.optime_begin }" type="text" id="optime_begin" name="optime_begin" class="form-control input-sm"> --%>
                            <!-- 										<div class="input-group-addon"><i class="fa fa-calendar"></i></div> -->
                            <!-- 									</div> -->
                            <!-- 									<label class="control-label" for="optime_end">至</label> -->
                            <!-- 									<div class="input-group"> -->
                            <%-- 										<input readonly value="${pagination.conditions.optime_end }" type="text" id="optime_end" name="optime_end" class="form-control input-sm"> --%>
                            <!-- 										<div class="input-group-addon"><i class="fa fa-calendar"></i></div> -->
                            <!-- 									</div> -->
                            <!-- 								</div> -->
                            <input type="submit" class="btn btn-primary btn-sm btn-search" value="查询"/>
                            <input type="button" id="clear" class="btn btn-default btn-sm" value="清除"/>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-body" style="padding: 8px;background-color:#f5f5f5;">
                            <div style="width: 100px; float: left;">
                                <i class="fa fa-list"></i> <strong>用户列表</strong>
                            </div>
                            <div style="float: right; padding-right: 50px;">
                                <div class="text-right" role="toolbar" aria-label="...">
                                    <div class="btn-group btn-group-xs" role="group" aria-label="...">
                                        <shiro:hasPermission name="log:export">
                                            <div class="btn-group btn-group-xs" role="group">
                                                <button type="button" class="btn btn-success dropdown-toggle"
                                                        data-toggle="dropdown" aria-haspopup="true"
                                                        aria-expanded="false">
                                                    <i class="fa fa-file-excel-o"></i> 导出 <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="javascript:;" data-export-type="all" class="export">全部...</a>
                                                    </li>
                                                    <li><a href="javascript:;" data-export-type="current-page"
                                                           class="export">当前页...</a></li>
                                                    <li><a href="javascript:;" data-export-type="current-conditions"
                                                           class="export">当前查询条件...</a></li>
                                                </ul>
                                            </div>
                                        </shiro:hasPermission>
                                        <shiro:hasPermission name="log:clear">
                                            <button id="clearAll" type="button" class="btn btn-danger">
                                                <i class="fa fa-trash-o"></i> 清空日志
                                            </button>
                                        </shiro:hasPermission>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="table-listheader" class="table-responsive">
                            <table class="table table-striped table-bordered table-hover table-condensed scrollTable">
                                <colgroup>
                                    <col style="width: 5%;"/>
                                    <col style="width: 10%;"/>
                                    <col style="width: 15%;"/>
                                    <col style="width: 15%;"/>
                                    <col style="width: 25%;"/>
                                    <col style="width: 30%;"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>操作人</th>
                                    <th>IP地址</th>
                                    <th>操作时间</th>
                                    <th>操作说明</th>
                                    <th>操作结果</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="table-responsive" style="height: 380px; overflow-y:auto; overflow-x:hidden;">
                            <table id="table-body"
                                   class="table table-striped table-bordered table-hover table-condensed scrollTable">
                                <colgroup>
                                    <col style="width: 5%;"/>
                                    <col style="width: 10%;"/>
                                    <col style="width: 15%;"/>
                                    <col style="width: 15%;"/>
                                    <col style="width: 25%;"/>
                                    <col style="width: 30%;"/>
                                </colgroup>
                                <tbody>
                                <c:forEach var="inst" items="${pagination.result }" varStatus="status">
                                    <!-- <tr> -->
                                    <%-- 												<td style="text-align:center;">${status.index + 1 }</td> --%>
                                    <%-- 												<td style="text-align:center;">${inst.opname }</td> --%>
                                    <%-- 												<td>${inst.operatorIp }</td> --%>
                                    <%-- 												<td style="text-align:center;">${inst.operatingTime }</td> --%>
                                    <%-- 												<td>${inst.description }</td> --%>
                                    <%-- 												<td>${inst.result }</td> --%>
                                    <!-- </tr> -->
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-right panel-footer" style="padding: 8px;">
                            <ul style="margin:0;" id="pagination" class="pagination pagination-sm"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
</body>
</html>